<template>
  <div class="xq">
    <!-- 顶部标签栏 -->
    <van-nav-bar title="标题" left-text="返回" class="top">
      <template #title>
        <span>{{ xqList.title }}</span>
      </template>
      <template #left>
        <span @click="$router.back()">返回</span>
      </template>
    </van-nav-bar>
    <!-- 图片区域 -->
    <div class="imgBox">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in xqList.houseImg"
          ><img :src="'http://liufusong.top:8080' + item" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 房屋基本信息 -->
    <div class="houseInfo">
      <div class="box">
        <!-- 房屋名称 -->
        <div class="houseName">
          <span>{{ xqList.title }}</span>
        </div>
        <!-- 房屋小标签 -->
        <div class="houseTips">
          <span v-for="item in xqList.tags">{{ item }}</span>
        </div>
      </div>
      <van-divider :style="{ color: '#1989fa', padding: '0' }" />
      <!-- 房屋参数 -->
      <div class="houseNum">
        <ul>
          <li>
            <p>{{ xqList.price }} /月</p>
            <span>租金</span>
          </li>
          <li>
            <p>{{ xqList.roomType }}</p>
            <span>房型</span>
          </li>
          <li>
            <p>{{ xqList.size }}平米</p>
            <span>面积</span>
          </li>
        </ul>
      </div>
      <van-divider />
      <!-- 房屋 信息 -->
      <div class="houseMsg">
        <ul>
          <li>
            <label>装修:</label>
            <span>精装</span>
          </li>
          <li>
            <label>朝向:</label>
            <span v-for="item in xqList.oriented">{{ item }}</span>
          </li>
          <li>
            <label>楼层:</label>
            <span>{{ xqList.floor }}</span>
          </li>
          <li>
            <label>类型:</label>
            <span>{{ xqList.roomType }}</span>
          </li>
        </ul>
      </div>
      <!-- 小区 -->
      <div class="xiaoqu">
        <label>小区:</label>
        <span>{{ xqList.community }}</span>
      </div>
    </div>
    <!-- 底部购买 -->
    <van-goods-action>
      <van-goods-action-button
        color="#58b67f"
        icon="shop-o"
        type="info"
        text="收藏"
      />
      <van-goods-action-button color="#58b67f" type="warning" text="在线咨询" />
      <van-goods-action-button color="#58b67f" type="danger" text="电话预约" />
    </van-goods-action>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "VueHkzfXq",

  data() {
    return {
      id: "",
      xqList: {},
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    async getList() {
      this.id = this.$route.query.id;
      const res = await request({
        url: `/houses/${this.id}`,
      });
      this.xqList = res.data.body;
      console.log(res);
    },
  },
};
</script>

<style lang="less" scoped>
.xq {
  padding-bottom: 100px;
}
.houseInfo {
  width: 100%;
  height: 266.4px;
  // background-color: blue;
  .box {
    padding: 0 15px;
    .houseTips {
      span {
        display: inline-block;
        color: #39becd;
        background: #e1f5f8;
        font-size: 12px;
        border-radius: 3px;
        padding: 4px 5px;
        margin-right: 5px;
        line-height: 12px;
      }
    }
    .houseName {
      margin: 15px 0px;
      span {
        font-weight: 400;
        font-size: 16px;
        color: #333;
      }
    }
  }
  .houseNum {
    display: flex;
    align-items: center;
    justify-content: center;
    ul {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      li {
        width: 109.66px;
        height: 52px;
        text-align: center;
        span {
          font-size: 14px;
          text-align: center;
          color: #999;
        }
        p {
          color: #fa5741;
          font-size: 18px;
          font-weight: bolder;
          margin: 5px;
        }
      }
    }
  }
  .houseMsg {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    margin-bottom: 20px;
    ul {
      width: 345px;
      height: 52px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: start;
      li {
        // text-align: center;
        padding: 0 10px;
        width: 150.5px;
        height: 26px;
        margin-bottom: 10px;
        label {
          display: inline-block;
          color: #999;
          padding-right: 5px;
          line-height: 26px;
          font-size: 13px;
        }
        span {
          height: 100%;
          font-family: "Microsoft YaHei";
          color: #333;
          font-size: 13px;
        }
      }
    }
  }
}
.top {
  background-color: #58b67f;
}
.imgBox {
  width: 100%;
  height: 252px;
  background-color: pink;
  img {
    width: 100%;
    height: 252px;
  }
}
.xiaoqu {
  padding: 010px;
  line-height: 44px;
  color: #666;
  font-size: 14px;
}
</style>
